<template>
    <div class="detail">
        <detail-head-nav title="景点详情" v-show="showNav" :style="{opacity:opacityNum}"></detail-head-nav>
        <detail-head @click="galleryToggle"></detail-head>
        <detail-content></detail-content>
        <transition>
            <gallery v-if="showGallery" @click="galleryToggle" ></gallery>
        </transition>
    </div>
</template>

<script>
    let that
    import Gallery from "../core/gallery"
    import DetailHead from "./detail-head.vue"
    import DetailContent from "./detail-content.vue"
    import DetailHeadNav from "../core/cityhead"
    import axios from "axios"
    export default {
        name: "index",
        provide(){
            return{
                ajaxData:this.ajaxData,
            }
        },
        components:{
            DetailHead,
            DetailContent,
            DetailHeadNav,
            Gallery
        },
        data(){
            return{
                showGallery:false,
                lastAid:"",
                ajaxData:{
                    data:{
                        gallery:[]
                    }
                },
                showNav:true,
                opacityNum:0
            }
        },
        methods:{
            galleryToggle(){
                this.showGallery = !this.showGallery
            },
            getList(aid){
                that = this;
                this.lastAid=aid
                axios.get('/api/tickets.json?aid='+aid).then((req) => {
                    that.ajaxData.data = req.data
                })
            },

            setNav(){
                const top = document.documentElement.scrollTop;
                this.showNav = top > 60;
                this.opacityNum=top/60-1
            }
        },
        activated(){
            if(this.$route.params.aid!==this.lastAid)this.getList(this.$route.params.aid);
            window.addEventListener('scroll',this.setNav);
        },
        deactivated(){
            window.removeEventListener('scroll',this.setNav)
        }
    }
</script>

<style lang="scss" scoped>
.detail{
    ::v-deep .cityhead{
        position: fixed;
        width: 100%;
        z-index:11;
    }
}
.v-enter, .v-leave-to{
    opacity:0;
}
.v-enter-active, .v-leave-active{
    position: absolute;
    z-index: 12;
    top: 0;
    bottom:0;
    width: 100%;
    transition: opacity 500ms;
}
</style>
